<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>工厂驾驶舱</title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <div class="dashboard-container">
        <!-- 头部标题 -->
        <header class="dashboard-header">
            <h1><i class="fas fa-industry"></i> 工厂驾驶舱</h1>
            <div class="header-info">
                <span class="time" id="current-time"></span>
                <span class="date" id="current-date"></span>
            </div>
        </header>



        <!-- 工厂总览区域 -->
        <section class="factory-overview" id="factory-overview">
            <div class="overview-header">
                <h2><i class="fas fa-chart-line"></i> 工厂总览</h2>
                <div class="overview-stats">
                    <div class="stat-item">
                        <span class="stat-label">总工厂数</span>
                        <span class="stat-value" id="total-factories">5</span>
                    </div>
                    <div class="stat-item">
                        <span class="stat-label">总车间数</span>
                        <span class="stat-value" id="total-workshops">25</span>
                    </div>
                    <div class="stat-item">
                        <span class="stat-label">运行中</span>
                        <span class="stat-value success" id="running-count">23</span>
                    </div>
                    <div class="stat-item">
                        <span class="stat-label">异常</span>
                        <span class="stat-value warning" id="warning-count">2</span>
                    </div>
                </div>
            </div>
            
            <div class="factory-grid" id="factory-grid">
                <!-- 动态生成工厂卡片 -->
            </div>
        </section>

        <!-- 车间详情区域 -->
        <section class="workshop-detail" id="workshop-detail" style="display: none;">
            <div class="detail-header">
                <button class="back-btn" onclick="showFactoryOverview()">
                    <i class="fas fa-arrow-left"></i> 返回工厂总览
                </button>
                <h2 id="workshop-title"><i class="fas fa-cogs"></i> 车间详情</h2>
                <!-- 车间选择器 -->
                <div class="workshop-selector">
                    <div class="workshop-tabs" id="workshop-tabs">
                        <!-- 动态生成车间标签 -->
                    </div>
                </div>
            </div>
            
            <!-- 核心指标区域 -->
            <section class="core-metrics">
                <!-- 订单完成情况 -->
                <div class="metric-card order-metrics">
                    <h2><i class="fas fa-clipboard-list"></i> 订单完成情况</h2>
                    <div class="metric-grid">
                        <div class="metric-item" onclick="showOrderDrill('pending')">
                            <div class="metric-value" id="pending-orders">156</div>
                            <div class="metric-label">待发货订单</div>
                        </div>
                        <div class="metric-item" onclick="showOrderDrill('shipped')">
                            <div class="metric-value" id="shipped-orders">1,234</div>
                            <div class="metric-label">已发货订单</div>
                        </div>
                        <div class="metric-item warning" onclick="showOrderDrill('delayed')">
                            <div class="metric-value" id="delayed-orders">23</div>
                            <div class="metric-label">未按时完成</div>
                        </div>
                    </div>
                    <div class="order-progress">
                        <h3>
                            订单履约进度
                            <a href="#" class="drill-down-btn" onclick="showOrderDrill('progress')">
                                <i class="fas fa-search"></i> 查看详情
                            </a>
                        </h3>
                        <div class="progress-list" id="order-progress-list">
                            <!-- 动态生成订单进度条 -->
                        </div>
                    </div>
                </div>

                <!-- 生产状况 -->
                <div class="metric-card production-metrics">
                    <h2><i class="fas fa-cogs"></i> 生产状况</h2>
                    <div class="production-overview">
                        <div class="production-lines" id="production-lines">
                            <!-- 动态生成生产线状态 -->
                        </div>
                        <div class="oee-summary">
                            <div class="oee-item" onclick="showProductionDrill('oee')">
                                <span class="oee-label">平均OEE</span>
                                <span class="oee-value" id="avg-oee">87.5%</span>
                            </div>
                            <div class="oee-item" onclick="showProductionDrill('capacity')">
                                <span class="oee-label">产能达成率</span>
                                <span class="oee-value" id="capacity-rate">92.3%</span>
                            </div>
                        </div>
                    </div>
                    <div class="capacity-chart">
                        <h3>
                            产能达成率趋势
                            <a href="#" class="drill-down-btn" onclick="showProductionDrill('trend')">
                                <i class="fas fa-chart-line"></i> 趋势分析
                            </a>
                        </h3>
                        <canvas id="capacity-chart"></canvas>
                    </div>
                </div>

                <!-- 质量状况 -->
                <div class="metric-card quality-metrics">
                    <h2><i class="fas fa-shield-alt"></i> 质量状况</h2>
                    <div class="quality-overview">
                        <div class="quality-item" onclick="showQualityDrill('overview')">
                            <div class="quality-value" id="total-tested">20,000</div>
                            <div class="quality-label">总检测量(芯)</div>
                        </div>
                        <div class="quality-item" onclick="showQualityDrill('defects')">
                            <div class="quality-value" id="defective-count">5</div>
                            <div class="quality-label">不良品数(芯)</div>
                        </div>
                        <div class="quality-item highlight" onclick="showQualityDrill('yield')">
                            <div class="quality-value" id="yield-rate">99.975%</div>
                            <div class="quality-label">良品率</div>
                        </div>
                    </div>
                    <div class="defect-analysis">
                        <h3>
                            不良品类型分布
                            <a href="#" class="drill-down-btn" onclick="showQualityDrill('analysis')">
                                <i class="fas fa-chart-pie"></i> 详细分析
                            </a>
                        </h3>
                        <canvas id="defect-chart"></canvas>
                    </div>
                </div>
            </section>

            <!-- 详细数据区域 -->
            <section class="detail-section">
                <!-- 异常事件记录 -->
                <div class="detail-card">
                    <h3>
                        <i class="fas fa-exclamation-triangle"></i> 实时异常事件
                        <a href="#" class="drill-down-btn" onclick="showEventDrill()">
                            <i class="fas fa-list"></i> 事件历史
                        </a>
                    </h3>
                    <div class="event-list" id="event-list">
                        <!-- 动态生成异常事件 -->
                    </div>
                </div>

                <!-- 不良品详情 -->
                <div class="detail-card">
                    <h3>
                        <i class="fas fa-search"></i> 不良品详情
                        <a href="#" class="drill-down-btn" onclick="showDefectDrill()">
                            <i class="fas fa-database"></i> 完整记录
                        </a>
                    </h3>
                    <div class="defect-details" id="defect-details">
                        <!-- 动态生成不良品详情 -->
                    </div>
                </div>
            </section>
        </section>
    </div>

    <!-- 钻取弹窗 -->
    <div class="drill-modal" id="drill-modal">
        <div class="drill-content">
            <div class="drill-header">
                <h3 class="drill-title" id="drill-title">数据详情</h3>
                <button class="close-btn" onclick="closeDrillModal()">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="drill-data" id="drill-data">
                <!-- 动态生成钻取内容 -->
            </div>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>
